<div id="root">
    <qf-nav-bar left-arrow title="商品创建" @click-left="clickLeftFn" @click-right="clickRightFn"></qf-nav-bar>
    <h1>表单组件</h1>
    <qf-table @submit="submitFn" :state="false" ref="a"></qf-table>
    <qf-table @submit="submitFn" :state="false" ref="b"></qf-table>
    <qf-table @submit="submitFn" :state="false" ref="c"></qf-table>
    <qf-table @submit="submitFn" :state="false" ref="d"></qf-table>
    <br>
    <hr>
    <br>
    <button @click="submitFn">点击请求接口</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script src="./qfui.js"></script>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
 
        },
        methods: {
            clickLeftFn() {
                alert('clickleft')
            },
            clickRightFn() {
                alert('clickright')
            },
            submitFn(formData) {
                console.log('商品数据',this.$refs.a.formData);
                console.log('商品数据',this.$refs.b.formData);
                alert('商品创建请求接口伪代码..')
            }
        }
    })
</script>